<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>#{lang.BaoHuTongDaoZhongDuan}</title>
		<link rel="stylesheet" href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link href='/resources/bootstrap/css/bootstrap-datetimepicker.min.css' rel='stylesheet' />
		<style>
.bs-callout {
	padding: 20px;
	padding-left: 40px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px;
}

.bs-callout-danger {
	border-left-color: #ce4844;
}

.num {
	font-size: 25px;
	margin: 10px;
}

.redNum {
	color: red;
	font-size: 22px;
	margin: 5px;
}

label {
	margin-left: 10px;
	margin-right: 10px;
	font-weight: normal;
}

input[type="checkbox"] {
	margin-left: 5px;
	margin-right: 5px;
}

.selectedDiv {
	box-shadow: 0 0 5px black;
}

.channel {
	color: green;
}

.device {
	color: blue;
}
</style>

	</ui:define>
	<ui:define name="content">
		<div  id="contentDiv" class="row" style="padding-left: 20px; padding-right: 20px;">
			<div class="nav-tabs-custom">
				<ul id="selectUL" class="nav nav-tabs pull-right ui-sortable-handle">
					<li class="" id="listDivTab"><a href="#tableDiv" data-toggle="tab" onmousedown="init();"
						aria-expanded="true">#{lang.mingXi}</a></li>
					<li class="active" id="pieDivTab"><a href="#pieDiv" data-toggle="tab"
						aria-expanded="false">#{lang.FenXi}</a></li>
					<li class="pull-left header" style="width: 1000px;">
						<div class="navbar-form">
							<button id="columnsSelectButton" style="margin: 10px; display: none;"
								class="btn btn-default " onclick="onColumnsSelectDivClick();">
								#{lang.LieShaiXuan}<span id="columnsSelectButtonIcon" class="fa fa-caret-down"></span>
							</button>
							<div class="input-group">
								<div class="btn btn-default">
									<i class="fa fa-calendar"></i>
								</div>
								<div class="form-group">
									<input type="text" class="form-control" id="start" />
								    <input class="form-control" type="text" id="end" />
								</div>
								<button id="pieButton" class="btn btn-default" onclick="pieQuery()">#{lang.ChaXun}</button>
								<button id="tableButton" class="btn btn-default" onclick="query()">#{lang.ChaXun}</button>
							</div>
							<button id="selectButton" style="margin: 10px; display: none" class="btn btn-default"
								onclick="onSelectDivClick();">
								#{lang.ShuJuShaiXuan} <span id="selectButtonIcon" class="fa fa-caret-down"></span>
							</button>

						</div>
					</li>
				</ul>
				<div class="panel-collapse collapse" id="columnsSelectDiv" style="position: relative;">
					<table class="table" style="margin: 0;">
						<tbody>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.LieShaiXuan}</td>
								<td class="col-sm-1"><label><input id="columnsAll" checked="checked"
										type="checkBox" onchange="selectAll(this.checked,'columns');" />#{lang.QuanXuan} </label></td>
								<td id="columns"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="panel-collapse collapse" id="selectDiv" style="position: relative;">
					<table class="table" style="margin: 0;">
						<tbody>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.DianYaDengJi}</td>
								<td class="col-sm-1"><label><input id="voltagesAll" checked="checked"
										type="checkBox" onchange="selectAll(this.checked,'voltages');" />#{lang.QuanXuan} </label></td>
								<td id="voltages"><label><input name="voltages" type="checkbox"
										checked="checked" value="500" onchange="checkboxChange(this,voltagesAll)" />500kV</label> <label><input
										name="voltages" type="checkbox" checked="checked" value="220"
										onchange="checkboxChange(this,voltagesAll)" />220kV</label></td>
							</tr>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.YuanYin}</td>
								<td class="col-sm-1"><label> <input id="reasonsAll" checked="checked"
										type="checkBox" onchange="selectAll(this.checked,'reasons');" />#{lang.QuanXuan}
								</label></td>
								<td id="reasons"><label><input name="reasons" type="checkbox" checked="checked"
										onchange="checkboxChange(this,reasonsAll)" value="device" />#{lang.BaoHuTongDaoYinQi}</label> <label><input
										name="reasons" type="checkbox" checked="checked"
										onchange="checkboxChange(this,reasonsAll)" value="channel" />#{lang.TongXinTongDaoYinQi}</label></td>
							</tr>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.XianLu}</td>
								<td class="col-sm-1"><label> <input id="linesAll" checked="checked"
										type="checkBox" onchange="selectAll(this.checked,'lines');" />#{lang.QuanXuan}
								</label></td>
								<td id="lines"></td>

							</tr>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.ChangZhanMingCheng}</td>
								<td class="col-sm-1"><label><input id="stationsAll" checked="checked"
										type="checkBox" onchange="selectAll(this.checked,'stations');" />#{lang.QuanXuan}</label></td>
								<td id="stations"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="tab-content" style="padding: 0;">
					<div class="chart tab-pane in active" id="pieDiv" style="position: relative;">
						<div class="bs-callout bs-callout-danger" id="description">
							#{lang.GongJi}<i class="redNum" id="count"></i>#{lang.BaoHuTongXiZhongDuanFaShengQiZhong}<i
								class="redNum" id="interruptCount"></i>#{lang.ShiYouTongDaoYinQi}。 <br /> #{lang.ZaoCheng}<i
								class="redNum" id="time"></i>#{lang.XiaoShiBaoHuZhongDuanQiZhong}<i class="redNum"
								id="interruptTime"></i>#{lang.XiaoShiShiYouTongDaoYinQi}。
						</div>
						<div class="col-sm-6">
							<h3>
								#{lang.BaoHuTongDaoZhongDuan} <span style='color: gray; font-size: 18px;'>:<span
									id="count2" class="redNum"></span>#{lang.Ci}
								</span>
							</h3>
							<div id="numPie" style="height: 300px;"></div>
						</div>
						<div class="col-sm-6">
							<h3>
								#{lang.BaoHuTongDaoZhongDuan} <span style='color: gray; font-size: 18px;'>:<span
									id="time2" class="redNum"></span>#{lang.XiaoShi}
								</span>
							</h3>
							<div id="timePie" style="height: 300px;"></div>
						</div>
					</div>
					<div class="chart tab-pane " id="tableDiv" style="position: relative;">
						<table id="alarmTable" style="table-layout: fixed" class="table table-gray">
						</table>
					</div>
				</div>
			</div>
		</div>
		<h:inputHidden id="startTime" value="#{request.getParameter('startTime')}"></h:inputHidden>
		<h:inputHidden id="endTime" value="#{request.getParameter('endTime')}"></h:inputHidden>
		<h:inputHidden id="stationId" value="#{request.getParameter('stationId')}"></h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/echarts/echarts.min.v3.7.2.js"></script>
		<script src="/resources/js/tables/mytable.js"></script>
		<script src="/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script>
			locale = {
				TongXinTongDaoZhongDuan : '#{lang.TongXinTongDaoZhongDuan}',
				BaoHuTongDaoZhongDuan : '#{lang.BaoHuTongDaoZhongDuan}',
				Ci : '#{lang.Ci}',
				XiaoShi : '#{lang.XiaoShi}',
				XuHao : '#{lang.XuHao}',
				ChangZhanMingCheng : '#{lang.ChangZhanMingCheng}',
				XianLu : '#{lang.XianLu}',
				BaoHuMingCheng : '#{lang.BaoHuMingCheng}',
				DianYaDengJi : '#{lang.DianYaDengJi}',
				GaoJingShiJian : '#{lang.GaoJingShiJian}',
				ZhongDuanShiChang : '#{lang.ZhongDuanShiChang}',
				XiaoXiNeiRong : '#{lang.XiaoXiNeiRong}',
				JiaZaiZhong : '#{lang.JiaZaiZhong}'
			}
			 $('#contentDiv').css('height',wrapperHeight);
		</script>
		<script type="text/javascript" src="dailyInterruptAlarmPie.js"></script>
		<script type="text/javascript" src="dailyInterruptAlarm.js"></script>
		<script>
			$(function() {
				initPie();
				init();
				$('#tableButton').css('display', 'none');
				$('#pieButton').css('display', 'inline-block');
			});
			/* 数据筛选按钮的展开和收起 */
			function onSelectDivClick() {
				var div = $('#selectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#selectButtonIcon').removeClass("fa fa-caret-up");
					$('#selectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#selectButtonIcon').removeClass("fa fa-caret-down");
					$('#selectButtonIcon').addClass("fa fa-caret-up");
				}
			}
			/* 列筛选按钮的展开和收起 */
			function onColumnsSelectDivClick() {
				var div = $('#columnsSelectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#columnsSelectButtonIcon').removeClass("fa fa-caret-up");
					$('#columnsSelectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#columnsSelectButtonIcon').removeClass("fa fa-caret-down");
					$('#columnsSelectButtonIcon').addClass("fa fa-caret-up");
				}

			}
			/* 点击明细页面，显示类筛选按钮和数据筛选按钮；点击统计页面，隐藏列筛选按钮和数据筛选按钮 */
			$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
				if (e.target.innerHTML == "明细" || e.target.innerHTML == "Details") {
					$('#selectButton').css('display', 'inline-block');
					$('#columnsSelectButton').css('display', 'inline-block');
					$('#pieButton').css('display', 'none');
					$('#tableButton').css('display', 'inline-block');
				} else {
					var div = $('#selectDiv');
					var colDiv = $('#columnsSelectDiv');
					div.collapse('hide');
					colDiv.collapse('hide');
					$('#selectButton').css('display', 'none');
					$('#columnsSelectButton').css('display', 'none');
					$('#tableButton').css('display', 'none');
					$('#pieButton').css('display', 'inline-block');
				}
			})
		</script>
	</ui:define>
</ui:composition>



